<template>
    <view class="container paddingBottomBar">
        <header-bar :config="config"></header-bar>
        <view class="main">
            <mescroll-uni v-if="loadOk" ref="mescrollRef" @init="mescrollInit" :height="height" :down="downOption"
                @down="downRefresh" :up="upOption" @up="getData">
                <view class="pro-list-item" @click="goCommodity(item)" v-for="(item, index) in datas" :index="index"
                    :key="index">
                    <view class="pro-main">
                        <view class="pro-name">
                            <text class="pro-name-text">{{ item.PName }}</text>
                        </view>
                        <view class="pro-num">
                            <text class="pro-num-text">货号：{{ item.PCode }}</text>
                        </view>
                        <view class="pro-num" v-if="item.PSku">
                            <text class="pro-num-text">规格：{{ item.PSku }}</text>
                        </view>
                        <view class="pro-num">
                            <text class="pro-num-text">单据编号：{{ item.BillCode }}</text>
                        </view>
                        <view class="pro-num">
                            <text class="pro-num-text">单据日期：{{ formatDate(item.BillDate) }}</text>
                        </view>
                        <view class="pro-price">
                            <view class="pro-price-left">
                                <text>￥{{ item.Price }}</text>
                                <text>x {{ item.Qty }}</text>
                                <text>{{ item.Unit }}</text>
                            </view>
                            <view class="pro-price-right">
                                <text>小计：</text>
                                <text class="total-price">￥{{ item.Total }}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </mescroll-uni>
        </view>

        <view class="bottom-bar">
            <text>合计：</text>
            <text class="price">￥</text>
            <text class="price">{{ totalPrice.toFixed(2) }}</text>
        </view>
    </view>
</template>

<script>
import { mapState, mapMutations } from "vuex"
import { getElementHeight } from "@/uni-sub-base/utils/elementUtil.js"
import easyProImage from "@/components/easy/easy-pro-image.vue"
import { GetSaleDetailGoodPage } from "@/service/api/erp.js"
export default {
    components: {
        easyProImage,
    },
    computed: {
        ...mapState("report", ["startDate", "endDate"]),
    },
    data() {
        return {
            downOption: {
                use: false,
            },
            config: {
                title: "商品清单",
                centerSlot: true,
            },
            height: "",
            loadOk: false,
            totalPrice: 0,
            type: 2,
            code: '',
            datas: [],
            param: {
                type: this.type,
                pageNumber: 0,
                pageSize: 0,
            },
        }
    },
    onLoad(e) {
        this.type = e.type
        this.code = e.goodcode
    },
    mounted() {
        this.getListHeight()
    },
    onShow() { },
    methods: {
        formatDate(dateStr, format = 'yyyy年mm月dd日') {
            const date = new Date(dateStr);
            if (!date.getTime()) return ''; // 如果日期无效，返回空字符串  

            const map = {
                'mm': date.getMonth() + 1, // 月份  
                'dd': date.getDate(), // 日  
                'yyyy': date.getFullYear() // 年份  
            };
            map['mm'] = (map['mm'] < 10 ? '0' : '') + map['mm']; // 补全月份  
            map['dd'] = (map['dd'] < 10 ? '0' : '') + map['dd']; // 补全日期  

            return format.replace(/(mm|dd|yyyy)/g, (m) => {
                return map[m] || m;
            });
        },
        getListHeight() {
            //获取商品高度
            getElementHeight(this, ".main", (e) => {
                this.height = e - 68 + "px"
                this.loadOk = true
                this.$nextTick(() => {
                    this.refresh()
                })
            })
        },
        //获取列表数据
        getData(page) {
            let param = this.param
            param.pageNumber = page.num
            param.pageSize = page.size
            param.startDate = this.startDate
            param.endDate = this.endDate
            param.type = +this.type
            param.code = this.code
            GetSaleDetailGoodPage(param).then((res) => {
                if (res.State == 1) {
                    this.totalPrice = res.OtherData;
                    this.mescroll.endBySize(res.Data.length, res.RecordAmout)
                    this.datas = this.datas.concat(res.Data)
                    this.allLength = res.RecordAmout
                    this.loadOk = true
                } else {
                    this.mescroll.endBySize(0, 0)
                    this.easyToast(res.Msg)
                }
            })
        },
        //刷新
        refresh() {
            this.downRefresh()
        },
        //刷新
        downRefresh() {
            this.datas = []
            this.mescroll.resetUpScroll()
        },
        goCommodity(item) {
            // this.easyGoTo("/pages_erp/new-sale/product-list?type="+this.type+'&code='+this.code+'&goodcode='+item.PCode)
        },
    },
}
</script>

<style lang="scss">
.container {
    // padding: $app-page-padding;
}

.main {
    padding: $app-page-padding;
}

.pro-list-item {
    display: flex;
    flex-direction: row;
    padding: $app-page-padding;
    background: $color-white;
    margin-bottom: $app-page-padding;
    border-radius: 16rpx;

    .pro-main {
        display: flex;
        flex: 1;
        flex-direction: column;

        text {
            color: $app-color-text-tip;
        }

        .pro-name {
            .pro-name-text {
                font-size: $font-size-30;
                font-weight: 700;
                color: $app-color-text-main;
            }

            .gift {
                color: $app-color-main;
            }
        }

        .pro-price {
            display: flex;
            flex-direction: row;
            align-items: center;

            .pro-price-left {
                display: flex;
                flex-direction: row;
                align-items: center;
                flex: 1;

                text {
                    margin-right: 8rpx;
                }
            }

            .pro-price-right {
                display: flex;
                flex-direction: row;
                align-items: center;

                text {
                    font-size: 28rpx;
                }
            }
        }

        .total-price {
            color: $app-color-text-main;
        }
    }
}

.bottom-bar {
    text {
        font-size: 28rpx;
        font-weight: bold;
    }

    .price {
        color: $app-color-main;
    }
}

.ml-20 {
    margin-left: 20rpx;
}
</style>
